<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id='app'>
        弹起来： <input @keyup='getKey' />  <br>
        按下去： <input @keydown.enter='login' />
        <h1 align=center>{{letter}}</h1>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    letter: 'A'
                }
            },
            created() {
                // 创建完成  没有元素   生命周期函数  不需要触发
            },
            mounted() {
                // 使用箭头函数保持 this 指向 Vue 实例
                document.addEventListener('keydown', (event) => this.pressKey(event));
            },
            methods: {
                pressKey(event) {
                    console.log(event)
                },
                login() {
                    alert('登录')
                },
                getKey(event) {
                    console.log(event);
                    if (event.keyCode == 13) {
                        alert('登录');
                        // 这里可以添加更新 letter 的逻辑
                        this.letter = '登录成功';
                    }
                    if (event.keyCode == 32) {
                        alert('巧了空格键');
                        // 这里可以添加更新 letter 的逻辑
                        this.letter = '按下了空格键';
                    }
                }
            }
        }).mount('#app');
    </script>
</body>

</html>